<template>
  <el-container>
    <el-main>
      <h1 align="center">成品入库单</h1>
      <el-form :inline="true" :model="form" size="mini">
        <el-form-item label="任务编号">
          <el-input v-model="form.no" />
        </el-form-item>
        <el-form-item label="客户名称">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList()">查询</el-button>
          <el-button type="primary" @click="mulPrint">批量打印</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-table
          :data="tableData"
          highlight-current-row
          style="width: 100%"
          border
          stripe
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="30" />
          <el-table-column v-show="true" prop="warehouseNo" label="入库单号" width="150" />
          <el-table-column v-show="true" prop="no" label="任务编号" width="150" />
          <el-table-column v-show="true" prop="name" label="客户名称" width="100" />
          <el-table-column v-show="true" prop="orderNum" label="订单数量" width="100" />
          <el-table-column v-show="true" prop="pnum" label="生产数量" width="100" />
          <el-table-column v-show="true" prop="boxType" label="箱型" width="100" />
          <!-- <el-table-column v-show="true" prop="material" label="材质" /> -->
          <el-table-column v-show="true" prop="perPrice" label="单价" width="100" />
          <el-table-column v-show="true" prop="proTime" label="生产时间" />
          <el-table-column v-show="true" prop="inTime" label="入库时间">
            <template slot-scope="scope">
              <span v-if="scope.row.state">{{ scope.row.inTime }}</span>
              <span>{{ null }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="480">
            <template slot-scope="scope">
              <el-popconfirm title="内容确定删除吗？" @onConfirm="deleted(scope)">
                <el-button slot="reference" :disabled="!scope.row.state" type="danger" size="mini">删除入库单</el-button>
              </el-popconfirm>
              <!-- <el-button :disabled="!scope.row.state" type="danger" size="mini" @click="deleted(scope)">删除入库单</el-button> -->
              <el-button :disabled="scope.row.state" type="primary" size="mini" @click="warehouse(scope)">
                <span v-if="!scope.row.state">入库</span><span v-else>已入库</span>
              </el-button>
              <el-button type="success" size="mini" :disabled="!scope.row.state" @click="printLn(scope)">打印</el-button>
              <el-button type="success" size="mini" :disabled="!scope.row.state" @click="label(scope)">成品入库标签打印</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <el-pagination
          background
          layout="total, sizes, prev, pager, next"
          :page-sizes="[10, 20, 30, 40]"
          :total="total"
          :current-page="form.page"
          :page-size="form.count"
          @size-change="sizeChange"
          @current-change="pageChange"
        />
      </div>
      <!-- 入库单打印对话框 -->
      <el-dialog
        title="成品入库标签打印"
        :visible.sync="storage_dialogVisible"
        width="30%"
      >
        <div id="printTest">
          <table>
            <tr>
              <td colspan="4">
                <h3 class="ups">{{ name5 }}</h3>
                <h3 class="ups">成品入库标签</h3>
              </td>
            </tr>
            <tr>
              <td>
                入库单号
              </td>
              <td colspan="3">
                {{ formData.warehouseNo }}
              </td>
            </tr>
            <tr>
              <td>
                客户
              </td>
              <td colspan="3">
                {{ formData.name }}
              </td>
            </tr>
            <tr>
              <td>
                箱型
              </td>
              <td colspan="3">
                {{ formData.boxType }}
              </td>
            </tr>
            <tr>
              <td>
                产品
              </td>
              <td colspan="3">
                {{ formData.productType }}
              </td>
            </tr>
            <tr>
              <td>
                订单尺寸
              </td>
              <td colspan="3">
                <span v-if="formData.length !== null || formData.width !== null || formData.height !== null">
                  {{ formData.length +" X "+ formData.width + " X "+ formData.height }}
                </span>
              </td>
            </tr>
            <tr>
              <td>
                订单量
              </td>
              <td>
                {{ formData.orderNum }}
              </td>
              <td>
                入仓量
              </td>
              <td>
                {{ formData.pnum }}
              </td>
            </tr>
            <tr>
              <td>
                交货日期
              </td>
              <td colspan="3">
                {{ formData.deliveryDate }}
              </td>
            </tr>
            <tr>
              <td>
                入库日期
              </td>
              <td colspan="3">
                {{ formData.inTime }}
              </td>
            </tr>
            <tr>
              <td>堆码</td>
              <td colspan="3">
                <span class="up">第&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;堆/共&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;堆</span>
              </td>
            </tr>
            <tr>
              <td>备注</td>
              <td colspan="3" />
            </tr>
          </table>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="storage_dialogVisible = false">取 消</el-button>
          <el-button v-print="'#printTest'" type="primary">确认打印</el-button>
        </span>
      </el-dialog>
    </el-main>
  </el-container>

</template>

<script>
import { list, inwarehouse, del } from '@/api/inwarehouse/inwarehouse'
import { lists } from '@/api/basedata/firm'

export default {
  data() {
    return {
      form: {
        page: 1,
        count: 10
      },
      tableData: [],
      total: 0,
      selectArray: [],
      storage_dialogVisible: false,
      name5: '',
      formData: {}
      // row_warehouseNo: '',
      // row_name: '',
      // row_boxType: ''
    }
  },
  created() {
    this.getList()
    lists().then(res => {
      console.log(res)
      var firmList = []
      firmList = res.list
      firmList.forEach(a => {
        if (a.isFirm === true) {
          this.name5 = a.name
          // console.log('name:' + this.name2)
        }
      })
    })
  },
  methods: {
    query() {
      alert('entry')
    },
    handleSelectionChange(select) {
      this.selectArray = select
    },
    mulPrint() {
      if (this.selectArray.length === 0) {
        this.selectArray = this.tableData
      }
      this.$router.push({
        path: './print',
        query: { 1: this.selectArray }
      })
    },
    printLn(scope) {
      this.$router.push({
        path: './print',
        query: { 2: scope.row }
      })
    },
    getList() {
      list(this.form).then(res => {
        this.tableData = res.list
        console.log('ssss', res.list)
        this.total = res.total
      })
    },
    sizeChange(size) {
      this.form.count = size
      this.getList()
    },
    pageChange(page) {
      this.form.page = page
      this.getList()
    },
    warehouse(scope) {
      inwarehouse(scope.row).then(res => {
        if (res) {
          this.$message.success('入库成功')
          this.getList()
        }
      })
    },
    label(scope) {
      this.storage_dialogVisible = true
      var data = scope.row
      data.inTime = data.inTime.split(' ')[0]
      this.formData = data
    },
    // 删除入库单
    deleted(scope) {
      del(scope.row.eid).then(res => {
        this.$message.success('删除成功')
        this.getList()
      })
      // console.log(scope.row.eid)
    }
  }
}

</script>
<style scoped lang="scss">
  .el-dialog__header {
    border: 0;
  }
    table{
  width:400px;
  border-collapse:collapse;
  height: auto;
  margin: 0 auto;
  margin-right: 250px;
}
tr{
  height: 35px;
}
table td{
  height: 50px;
}
td{
  width: 100px;
  text-align: center ;
  line-height: 35px;
}
table,tr,td{
  border:1px solid black;
}
.ups{
  line-height: 10px;
  color: #080e11;
}
</style>
